<template>
  <div class="produceMain">
    <transition name="produceContent">
      <div v-if="produceIsShow" id="bb-bookblock" class="bb-bookblock content "
        @touchstart="!isPress?start($event):null" @touchmove="!isPress?move($event):null"
        @touchend="!isPress?end($event):null">
        <div class="bb-item" v-for="(item,index) in produce.content" :key="index">
          <div class="scene" :style="sceneStyle(item.scene)">
            <transition-group name="bounceExpCard">
              <Imagery v-for="eryItem in item.imagery" :key="eryItem.produceEryId" :indexImagery="eryItem" />
              <Role v-for="roleItem in item.role" :key="roleItem.produceRoleId+999" :indexRole="roleItem" />
            </transition-group>
          </div>
        </div>
      </div>
    </transition>
    <Nav @reload="reload" />
    <Pack v-if="!toolbarIsShow" />
    <transition name="popDown">
      <Tollbar v-if="toolbarIsShow" />
    </transition>
  </div>
</template>

<script>
import Nav from "./nav.vue"
import Pack from "../pack/pack.vue"
import Imagery from "./imagery.vue"
import Role from "./role.vue"
import Tollbar from "./toolbar.vue"
import { mapGetters, mapActions } from "vuex"
export default {
  components: {
    Nav,
    Pack,
    Imagery,
    Role,
    Tollbar
  },
  data() {
    return {
      book: null,
      moveX: 0,
      isPressSwiper: false,
      toolbarIsShow: false,
      produceIsShow: true
    }
  },
  mounted() {
    this.book = $('#bb-bookblock')
    this.book.bookblock({
      speed: 800,
      shadowSides: 0.8,
      shadowFlip: 0.7,
      shadows: true,
      onEndFlip: (old, page) => {
        //修改当前绘本页
        this.setProduceCurrent(page)
      }
    })
  },
  computed: {
    //工具栏是否激活
    isPress() {
      return JSON.stringify(this.actionElement) !== "{}"
    },
    //创作场景 无场景则为默认
    sceneStyle(scene) {
      return function (scene) {
        const background = scene ? scene : this.variable.STATICE_URLTITLE + "produce/默认场景.png"
        return {
          background: "url(" + background + ")0 0/100% 100%"
        }
      }
    },
    ...mapGetters("produceStatus", {
      produce: "getProduce",
      current: "getProduceCurrent",
      actionElement: "getActionElement",
      userProduceList: "getUserProduceList"
    })
  },
  methods: {
    start: function (event) {
      this.moveX = event.changedTouches[0].clientX
    },
    move: function (event) {
      if (this.isPressSwiper) return
      if (event.changedTouches[0].clientX - this.moveX > 50) {
        this.bookMusic()
        this.book.bookblock('prev')
        this.isPressSwiper = true
      }
      if (event.changedTouches[0].clientX - this.moveX < - 50) {
        this.bookMusic()
        this.book.bookblock('next')
        this.isPressSwiper = true
      }
    },
    end: function () {
      this.moveX = 0
      this.isPressSwiper = false
    },
    //刷新页面
    reload: function () {
      this.produceIsShow = false
      setTimeout(() => {
        this.produceIsShow = true
        this.$nextTick(() => {
          this.book = $('#bb-bookblock')
          this.book.bookblock({
            speed: 800,
            shadowSides: 0.8,
            shadowFlip: 0.7,
            shadows: true,
            current: this.current,
            onEndFlip: (old, page) => {
              //修改当前绘本页
              this.setProduceCurrent(page)
            }
          })
          this.book.bookblock('next')
        })
      }, 0)
    },
    ...mapActions("produceStatus", ["setUserProduceList", "setProduceCurrent"])
  },
  watch: {
    //监听produce数据 保存
    produce: {
      handler(produce) {
        this.userSaveDate("produces", produce)
        // 如果当前操作页已保存在用户创作列表则更新创作列表
        if (produce.detail.produceId >= 0) {
          for (let i = 0, len = this.userProduceList.length; i < len; i++) {
            if (this.userProduceList[i].detail.produceId === produce.detail.produceId) {
              this.userProduceList[i] = produce
              break
            }
          }
          this.userSaveDate("userProduceList", this.userProduceList)
          this.setUserProduceList(this.userProduceList) //修改用户创作列表
        }
      },
      deep: true
    },
    actionElement: function (element) {
      this.toolbarIsShow = false
      this.toolbarIsShow = true
      if (JSON.stringify(element) === "{}") {
        this.toolbarIsShow = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.produceMain
  position absolute
  width 100%
  height 100%
  .content
    position absolute
    width 100%
    height 100%
    .scene
      width 100%
      height 100%
      transition all 0.3s
.produceContent-leave-active
  animation produceContents 1s
@keyframes produceContents
  0%
    opacity 1
  100%
    opacity 1
</style>